<template>
  <div class="login">
    <section>
      <!-- 背景颜色 -->
      <div class="color"></div>
      <div class="color"></div>
      <div class="color"></div>
      <div class="box">
        <!-- 背景圆 -->
        <div class="circle" style="--x:0"></div>
        <div class="circle" style="--x:1"></div>
        <div class="circle" style="--x:2"></div>
        <div class="circle" style="--x:3"></div>
        <div class="circle" style="--x:4"></div>
        <!-- 登录框 -->
        <div class="container">
          <div class="form">
            <h2>登录</h2>
              <div class="inputBox">
                <!-- <input type="text"  /> -->
                <el-input v-model="username" placeholder="用户名" ></el-input>
              </div>
              <div class="inputBox">
                <el-input type="password" v-model="password" placeholder="密码" ></el-input>
                <!-- <input type="password" placeholder="密码" /> -->
              </div>
              <div class="inputBox">
                <el-button type="primary" round @click="login">登录</el-button>
                <!-- <input type="submit" value="登录" /> -->
              </div>
              <p class="forget">
                忘记密码?
                <a class="btn " href="">点击这里</a>
              </p>
              <p class="forget">
                没有账户?
                <a href="#">注册</a>
              </p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
    name:'login',
    data(){
        return{
            username: '',
            password: ''
        }
    },
    methods:{
        async login(){
            if(this.username && this.password){
                this.$message.success('success')
                const resp = await this.$api.login(this.username,this.password)
                console.log(resp);
            }else{
                this.$message.error('你还有信息未填写')
            }
        }
    }
};
</script>

<style lang="scss" scoped>
    @import url(@/assets/css/login.css);

</style>
